<template>
  <div class="welcome-3">
    <div class="box">
      <h1>However,</h1>
      <p>Such designs are more suitable for short, concise but decorative displays</p>
      <p>
        For longer, clearly segmented, mostly plain text displays, this may no longer make sense.
      </p>
      <p>
        You can try another project which is also written by
        <a href="https://kuankuan.site" target="_blank">kuankuan</a> , and it focuses on long text,
        segmented, multi-article, or even organized in a tree structure.
      </p>
      <a href="https://multi-page-document-template.pages.kuankuan.site/" target="_blank"
        ><div
          style="
            text-align: center;
            margin: 1em;
            padding: 1em;
            background: #444;
            border-radius: 0.5em;
            box-shadow: 0.5em 0.5em 1em #ff00ea54;
          "
        >
          Multi Page Document Template
        </div></a
      >
      <p>
        The two projects are not superior to each other; they just focus on different ways of
        organizing that are more beneficial to a particular area.
      </p>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.welcome-3 {
  background: rgb(43, 0, 26);
  border-radius: 1em;
  box-shadow: 0.5em 0.5em 1em #ff00ea54;
}
.box {
  padding: 1em;
}
h1,
h2 {
  margin: 0.2em 0;
  padding: 0;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
h3 {
  margin: 0.5em 0;
  padding: 0;
  font-size: 1.5em;
}
p {
  margin: 0.5em 0;
  padding: 0;
}
*:focus {
  outline: none;
}
</style>
